<template>
	<view>
		<view class="back" @click="back()">
			<view class="backzhezhao"></view>
			<image src="../../static/images/back3.png"></image>
		</view>
		<view class="top prel">
			<view class="image-container w100">
				<image mode="aspectFill" :src="theme.url"></image>
			</view>
		</view>
		<view class="text-box ml20 mr20 prel">
			<view class="name">{{theme.name}}</view>
			<view class="desc mt10" v-if="theme.desc">{{theme.desc}}</view>
		</view>
		<view class="w100 flex flex_wrap flex_jc">
			<view class="w710 gongzhong flex flex_jc flex_wrap">
				<view @click="goArticle(item.weburl,item.name)" class="prel li" v-for="(item,index) in list">
					<view class="gzbg">
						<image style="width: 100%;" mode="aspectFill" :src="item.url"></image>
					</view>
					<view class="title hidden1">{{item.name}}</view>
					<view class="desc hidden2" v-if="item.desc">{{item.desc}}</view>
				</view>
				<view class="tips w100">{{tips}}</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {getGongzhongList} from "@/api/api"
    export default {
        data() {
            return {
				list:[],
				page:1,
				theme_id:0,
				count:0,
				tips:'壁纸加载中',
				theme:[],
			
			}
        },
		
		onLoad: function (option) {
			
			var that = this
			
			that.getGongzhongList()
		},
		
		onShareAppMessage(e) {
			return {
				path: '/pages/gongzhonglist/index?index',
			}
		},
		
		
		onShareTimeline(e) {
			return {
				path: '/pages/gongzhonglist/index?index',
			}
		},
		
		onReachBottom(){
		  if(this.count<=this.list.length){
			  this.tips = '亲，我是有底线的呢~'
		  }else{
			  this.page += 1
			  this.getGongzhongList()
		  }
		},
		
		 methods: {
			 
		
			back(){
				const pages = getCurrentPages();
				console.log(pages.length)
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/index/index',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			}, 
			 
			getGongzhongList(){
				var that = this
				getGongzhongList(that.page).then(res=>{
					if(res.code==0){
						if(that.page==1){
							that.theme = res.data.theme
						}
						for(var i = 0; i<res.data.data.length;i++){
							that.list.push(res.data.data[i])
						}
						that.count = res.data.total
						if(that.count>that.list.length){
							 that.tips = '壁纸加载中'
						}else{
							that.tips = '亲，我是有底线的呢~'
						}
						
					}else{
						//网络连接出错
					}
					console.log(res)
				})
			},
			
			goArticle(weburl,title){
				uni.setStorageSync('weburl',weburl)
				uni.navigateTo({
					url: '/pages/article/index?title='+title,
				}); 
			},
		
		  }
    }
</script>
<style>
	
</style>
<style lang="scss">
	
	.gongzhong .li .desc{margin: 0 20rpx;font-size: 20rpx;color: #9e9e9e;white-space: break-spaces;}
	.gongzhong .li .title{margin: 10rpx 20rpx;font-size: 30rpx;color: #FFFFFF;}
	.gongzhong .gzbg{width: 100%;height: 300rpx;overflow: hidden;}
	.gongzhong .li{width: 600rpx;height: 450rpx;background-color: #141414;border-radius: 20rpx;
	overflow: hidden;margin-top: 20rpx;}
	
	.tips{margin: 20rpx 0;font-size: 25rpx;color: #999999;text-align: center}
	.backzhezhao{width: 100%;height: 100%;border-radius: 100%;background-color: #000000;
		opacity: .5;position: absolute;top: 0;}
	.back{width: 60rpx;height: 60rpx;position: fixed;top: 38px;left: 24px;z-index: 2;}
	.back image{width: 100%;height: 100%;z-index: 3;position: relative;}
	.text-box .desc{font-size: 25rpx;color: #9e9e9e;}
	.text-box .name{font-size: 35rpx;font-weight: bold;}
	.text-box{margin-top: -40rpx;}
	.image-container {
	  position: relative;
	  display: inline-block;
	  height: 400rpx;
	}
	 
	.image-container image {
	  display: block;
	  width: 100%;
	  height: 400rpx;
	}
	 
	.image-container::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 100rpx; /* 模糊区域的高度 */
	  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
	  pointer-events: none; /* 防止伪元素影响鼠标事件 */
	}
	.top{overflow: hidden;height: 400rpx;}

</style>